<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>中空领航 - 视频</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #000;
            color: #fff;
            line-height: 1.5;
            height: 100vh;
            overflow: hidden;
        }
        
        /* 主题颜色 */
        :root {
            --primary-color: #0B3D91; /* 深蓝色主题 */
            --secondary-color: #4A90E2; /* 天蓝色 */
            --accent-color: #FFD700; /* 金色点缀 */
            --light-color: #FFFFFF;
            --dark-color: #1A1A1A;
            --red-color: #FF4D4F;
        }
        
        /* 顶部控件区 */
        .top-controls {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
            z-index: 100;
        }
        
        
        .top-controls .right-controls {
            display: flex;
        }
        
        .top-controls .icon {
            margin-left: 15px;
            font-size: 24px;
        }
        
        /* 分类标签栏 */
        .category-tabs {
            display: flex;
            padding: 0 10px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin-top: 10px;
            position: absolute;
            top: 10px;
            left: 0;
            width: 100%;
            z-index: 100;
        }
        
        .category-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .category-tab {
            padding: 8px 16px;
            margin-right: 10px;
            border-radius: 18px;
            font-size: 15px;
            white-space: nowrap;
            background-color: rgba(255,255,255,0.15);
            color: rgba(255,255,255,0.7);
            font-weight: 500;
        }
        
        .category-tab.active {
            background-color: rgba(255,255,255,0.25);
            color: white;
            font-weight: bold;
        }
        
        /* 视频容器样式 */
        .video-container {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background-color: #000;
        }
        
        .video-item {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        .video-item video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 为视频添加进度指示条 */
        .video-progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 3px;
            background-color: rgba(255,255,255,0.3);
            width: 100%;
            z-index: 101;
        }
        
        .video-progress-bar {
            height: 100%;
            background-color: #fff;
            width: 0%;
            transition: width 0.1s linear;
        }
        
        /* 双击点赞动画 */
        .like-animation {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .like-animation.show {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            animation: pulse 0.5s ease-in-out;
        }
        
        .like-animation .material-icons {
            font-size: 100px;
            color: #ff2d55;
        }
        
        @keyframes pulse {
            0% {
                transform: translate(-50%, -50%) scale(0.5);
                opacity: 0.7;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.2);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.8;
            }
        }
        
        /* 视频信息区样式 */
        .video-info {
            position: absolute;
            bottom: 100px;
            left: 15px;
            right: 80px;
            color: #fff;
            z-index: 10;
        }
        
        .video-title {
            font-size: 17px;
            font-weight: bold;
            margin-bottom: 10px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
            line-height: 1.4;
        }
        
        .video-desc {
            font-size: 15px;
            margin-bottom: 12px;
            opacity: 0.9;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
            line-height: 1.3;
        }
        
        .video-tag {
            color: #4A90E2;
            font-weight: 600;
            margin-right: 5px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
        }
        
        .creator {
            display: flex;
            align-items: center;
            margin-top: 15px;
        }
        
        .avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
            border: 2px solid rgba(255,255,255,0.8);
        }
        
        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .creator-name {
            font-size: 15px;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .follow-btn {
            background-color: #ff2d55;
            color: #fff;
            border-radius: 4px;
            padding: 3px 10px;
            font-size: 13px;
            font-weight: bold;
        }
        
        /* 右侧互动按钮样式 */
        .interaction-buttons {
            position: absolute;
            right: 12px;
            bottom: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 10;
        }
        
        .interaction-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
            cursor: pointer;
        }
        
        .interaction-btn .material-icons {
            font-size: 32px;
            color: #fff;
            margin-bottom: 4px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        }
        
        .interaction-btn .count {
            font-size: 13px;
            color: #fff;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }
        
        .interaction-btn .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid #fff;
            overflow: hidden;
            position: relative;
        }
        
        .interaction-btn .avatar::after {
            content: '+';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 18px;
            height: 18px;
            background-color: var(--red-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: bold;
        }
        
        .interaction-btn .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 右侧互动区 */
        .interaction-controls {
            position: absolute;
            right: 15px;
            bottom: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 100;
        }
        
        .user-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 2px solid white;
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 底部信息区 */
        .video-info {
            position: absolute;
            bottom: 80px;
            left: 0;
            width: 100%;
            padding: 15px;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            z-index: 100;
        }
        
        .video-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .video-desc {
            font-size: 14px;
            opacity: 0.8;
            margin-bottom: 10px;
        }
        
        .creator-info {
            display: flex;
            align-items: center;
        }
        
        .creator-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
        }
        
        .creator-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .creator-name {
            font-size: 14px;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .follow-btn {
            padding: 3px 10px;
            border-radius: 15px;
            background-color: var(--primary-color);
            font-size: 12px;
        }
        
        
        /* 红包悬浮按钮 */
        .redpacket-btn {
            position: absolute;
            right: 15px;
            top: 15%;
            transform: translateY(-50%);
            background: linear-gradient(135deg, #FF4D4F, #FF9500);
            border-radius: 20px;
            padding: 8px 12px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 8px rgba(255,77,79,0.5);
            z-index: 100;
        }
        
        .redpacket-btn .icon {
            font-size: 20px;
            margin-right: 5px;
            color: var(--accent-color);
        }
        
        .redpacket-btn .text {
            font-size: 12px;
            font-weight: bold;
        }
        
        /* 商家推荐卡片 */
        .merchant-card {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: rgba(0,0,0,0.8);
            padding: 15px;
            display: flex;
            align-items: center;
            z-index: 200;
            transform: translateY(100%);
            transition: transform 0.3s;
        }
        
        .merchant-card.show {
            transform: translateY(0);
        }
        
        .merchant-logo {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            overflow: hidden;
            margin-right: 15px;
        }
        
        .merchant-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .merchant-info {
            flex: 1;
        }
        
        .merchant-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .merchant-desc {
            font-size: 12px;
            opacity: 0.8;
            margin-bottom: 5px;
        }
        
        .merchant-coupon {
            font-size: 12px;
            color: var(--accent-color);
        }
        
        .merchant-btn {
            padding: 8px 15px;
            border-radius: 20px;
            background-color: var(--primary-color);
            font-size: 14px;
            font-weight: bold;
        }
        
        /* 评论区 */
        .comments-container {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 70%;
            background-color: #1A1A1A;
            border-radius: 15px 15px 0 0;
            z-index: 300;
            transform: translateY(100%);
            transition: transform 0.3s;
            overflow: hidden;
        }
        
        .comments-container.show {
            transform: translateY(0);
        }
        
        .comments-header {
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        
        .comments-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        .close-btn {
            font-size: 24px;
        }
        
        .comments-list {
            height: calc(100% - 60px);
            overflow-y: auto;
            padding: 15px;
        }
        
        .comment-item {
            display: flex;
            margin-bottom: 20px;
        }
        
        .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
        }
        
        .comment-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .comment-content {
            flex: 1;
        }
        
        .comment-user {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 3px;
        }
        
        .comment-text {
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .comment-meta {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #999;
        }
        
        .comment-time {
            margin-right: 15px;
        }
        
        .comment-like {
            display: flex;
            align-items: center;
        }
        
        .comment-like .icon {
            font-size: 14px;
            margin-right: 3px;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: rgba(0,0,0,0.8);
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 20%;
        }
        
        .nav-item .icon {
            font-size: 22px;
            margin-bottom: 3px;
            color: #999;
        }
        
        .nav-item .label {
            font-size: 12px;
            color: #999;
        }
        
        .nav-item.active .icon,
        .nav-item.active .label {
            color: var(--light-color);
        }
        
        /* 中间凸起的导航项 */
        .nav-item.featured {
            transform: translateY(-10px);
        }
        
        .nav-item.featured .icon {
            background-color: var(--primary-color);
            color: white;
            width: 44px;
            height: 44px;
            border-radius: 22px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 2px;
            font-size: 26px;
            box-shadow: 0 4px 8px rgba(11, 61, 145, 0.3);
        }
        
        .nav-item.featured .label {
            font-weight: bold;
            color: var(--primary-color);
        }
        
        /* 图标字体 (使用Material Icons) */
        @font-face {
            font-family: 'Material Icons';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
        }
        
        .material-icons {
            font-family: 'Material Icons';
            font-weight: normal;
            font-style: normal;
            font-size: 24px;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-feature-settings: 'liga';
            -webkit-font-smoothing: antialiased;
        }
        
        /* 视频搜索区域样式 */
        .video-search-container {
            position: absolute;
            top: 110px;
            left: 0;
            width: 100%;
            padding: 10px 15px;
            background-color: rgba(0,0,0,0.7);
            border-radius: 0;
            margin: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            z-index: 99;
            display: none; /* 默认隐藏 */
        }
        
        .search-box {
            display: flex;
            gap: 8px;
        }
        
        .search-box input {
            flex: 1;
            padding: 10px;
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 20px;
            font-size: 14px;
            background-color: rgba(0,0,0,0.5);
            color: #fff;
        }
        
        .search-box input::placeholder {
            color: rgba(255,255,255,0.6);
        }
        
        .search-box button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 15px;
            cursor: pointer;
            font-weight: bold;
        }
        
        .search-box button:hover {
            opacity: 0.9;
        }
        
        .search-box button:disabled {
            background-color: rgba(255,255,255,0.3);
            cursor: not-allowed;
        }
        
        .search-tips {
            margin-top: 8px;
            font-size: 12px;
            color: rgba(255,255,255,0.6);
        }
        
        /* 播放提示样式 */
        .play-tip {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.6);
            color: #fff;
            padding: 12px 20px;
            border-radius: 24px;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 100;
            animation: pulse 1.5s infinite;
            cursor: pointer;
        }
        
        .play-tip .material-icons {
            font-size: 24px;
        }
        
        @keyframes pulse {
            0% {
                opacity: 0.7;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0.7;
            }
        }
    </style>
</head>
<body>
    <!-- 视频容器 -->
    <div class="video-container">
        <div class="video-progress">
            <div class="video-progress-bar"></div>
        </div>
        <div class="video-item">
            <!-- 使用视频标签替换图片占位符 -->
            <video 
                src=""
                controls
                autoplay
                loop
                playsinline
                style="width:100%;height:100%;object-fit:cover;">
                您的浏览器不支持HTML5视频播放
            </video>
        </div>
        
        
        <!-- 分类标签栏 -->
        <div class="category-tabs">
            <div class="category-tab active">推荐</div>
            <div class="category-tab">短剧</div>
            <div class="category-tab">热门</div>
            <div class="category-tab">关注</div>
            <div class="category-tab">附近</div>
            <div class="category-tab">航空科普</div>
        </div>
        
        <!-- 双击点赞动画 -->
        <div class="like-animation">
            <span class="material-icons">favorite</span>
        </div>
        
        <!-- 视频信息区 -->
        <div class="video-info">
            <h3 class="video-title">探索低空旅游新体验</h3>
            <p class="video-desc">低空旅游正成为新的旅游热点</p>
            <div class="creator">
                <div class="avatar">
                    <img src="https://pan.feiwow.com/raw/files/2401749240120_.pic-1749240131553.jpg" alt="创作者头像">
                </div>
                <div class="creator-name">中空领航官方</div>
                <div class="follow-btn">关注</div>
            </div>
        </div>
        
        <!-- 右侧互动按钮 -->
        <div class="interaction-buttons">
            <div class="interaction-btn">
                <div class="avatar">
                    <img src="https://pan.feiwow.com/raw/files/2401749240120_.pic-1749240131553.jpg" alt="创作者头像">
                </div>
            </div>
            <div class="interaction-btn">
                <span class="material-icons">favorite</span>
                <div class="count">1.2k</div>
            </div>
            <div class="interaction-btn">
                <span class="material-icons">chat_bubble</span>
                <div class="count">328</div>
            </div>
            <div class="interaction-btn">
                <span class="material-icons">share</span>
                <div class="count">分享</div>
            </div>
        </div>
        
        <!-- 红包悬浮按钮 -->
        <div class="redpacket-btn">
            <span class="material-icons">videocam</span>
            <span class="text">刷视频领红包</span>
        </div>
        
        <!-- 商家推荐卡片 -->
        <!-- <div class="merchant-card">
            <div class="merchant-logo">
                <img src="https://via.placeholder.com/50x50" alt="商家Logo">
            </div>
            <div class="merchant-info">
                <div class="merchant-name">天空餐厅</div>
                <div class="merchant-desc">空中美食体验，俯瞰城市美景</div>
                <div class="merchant-coupon">新用户立减50元</div>
            </div>
            <div class="merchant-btn">查看</div>
        </div> -->
        
        <!-- 评论区 -->
        <div class="comments-container">
            <div class="comments-header">
                <div class="comments-title">评论 (328)</div>
                <div class="close-btn">
                    <span class="material-icons">close</span>
                </div>
            </div>
            <div class="comments-list">
                <div class="comment-item">
                    <div class="comment-avatar">
                        <img src="https://picsum.photos/200/200" alt="评论用户头像">
                    </div>
                    <div class="comment-content">
                        <div class="comment-user">航空爱好者</div>
                        <div class="comment-text">这个低空旅游项目太棒了，上个月体验过，视野非常开阔，完全不同的旅游体验！</div>
                        <div class="comment-meta">
                            <div class="comment-time">2小时前</div>
                            <div class="comment-like">
                                <span class="material-icons">thumb_up</span>
                                <span>42</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="comment-item">
                    <div class="comment-avatar">
                        <img src="https://picsum.photos/80/80" alt="评论用户头像">
                    </div>
                    <div class="comment-content">
                        <div class="comment-user">旅行达人</div>
                        <div class="comment-text">请问这个项目在哪些城市有？价格大概是多少？想带家人去体验一下。</div>
                        <div class="comment-meta">
                            <div class="comment-time">3小时前</div>
                            <div class="comment-like">
                                <span class="material-icons">thumb_up</span>
                                <span>18</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="comment-item">
                    <div class="comment-avatar">
                        <img src="https://picsum.photos/90/90" alt="评论用户头像">
                    </div>
                    <div class="comment-content">
                        <div class="comment-user">中空领航官方</div>
                        <div class="comment-text">@旅行达人 目前我们在北京、上海、广州、成都等15个城市都有低空旅游项目，价格从299元起，详情可以点击视频简介中的链接了解更多。</div>
                        <div class="comment-meta">
                            <div class="comment-time">2小时前</div>
                            <div class="comment-like">
                                <span class="material-icons">thumb_up</span>
                                <span>36</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 更多评论 -->
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item">
            <div class="icon">
                <span class="material-icons">home</span>
            </div>
            <div class="label">首页</div>
        </div>
        <div class="nav-item">
            <div class="icon">
                <span class="material-icons">flight</span>
            </div>
            <div class="label">当股东</div>
        </div>
        <div class="nav-item featured">
            <div class="icon">
                <span class="material-icons">landscape</span>
            </div>
            <div class="label">建营地</div>
        </div>
        <div class="nav-item active">
            <div class="icon">
                <span class="material-icons">videocam</span>
            </div>
            <div class="label">领红包</div>
        </div>
        <div class="nav-item">
            <div class="icon">
                <span class="material-icons">person</span>
            </div>
            <div class="label">我的</div>
        </div>
    </div>
    
    <!-- 视频搜索区域 -->
    <div class="video-search-container" id="search-container">
        <div class="search-box">
            <input type="text" id="douyin-url" placeholder="请输入视频链接或关键词..." />
            <button id="parse-btn">搜索</button>
        </div>
        <div class="search-tips">
            支持视频链接或关键词搜索
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 视频数据源 - 使用更可靠的公开视频源
            const videoSources = [
                {
                    url: "https://feiwow.com:62/?explorer/share/file&hash=8dd05MnuRXn_EwtG_yOH_c3bWThXz4YZ4_Ff-4gwqChUHCG6MvvZKzkGjdVaLIo0dnfS",
                    title: "探索低空旅游新体验",
                    desc: "低空旅游正成为新的旅游热点...",
                    author: "中空领航官方",
                    likes: "1.2k",
                    comments: "328",
                    shares: "56",
                    tags: ["低空旅游", "直升机", "航空体验"]
                },
                {
                    url: "https://feiwow.com:62/?explorer/share/file&hash=e74cT_oz0JIaZ_MIf9knt5LgE7hloq-Cvs_K7vY14jSgcHSqzMNI9Dm3LC7dJAGcOutB",
                    title: "零重力飞机工业（合肥）有限公司",
                    desc: "合肥智造三款eVTOL飞行器...",
                    author: "航空体验官",
                    likes: "2.5k",
                    comments: "456",
                    shares: "89",
                    tags: ["城市风光", "直升机", "高空俯瞰"]
                },
                {
                    url: "https://feiwow.com:62/?explorer/share/file&hash=cb8duDv2k_HXQ-KbIGLgiRz3u0wRjDy6VM2b8_GwUiIViZbHBjUCsMDgP7YIUsPNThZ4",
                    title: "民用无人驾驶航空器运营合格证落户合肥",
                    desc: "中国低空飞行开启\"载人时代\"...",
                    author: "中空领航官方",
                    likes: "3.7k",
                    comments: "512",
                    shares: "203",
                    tags: ["载人飞行", "浪漫体验", "高空漫游"]
                },
                {
                    url: "https://feiwow.com:62/?explorer/share/file&hash=080eSjCpgW46BW8CBArHLNpw07KfsZqy7qHnVNM39DvIs_Muh3OiOlhGU64amfq3uFrW",
                    title: "央视《焦点访谈》讨论 低空经济",
                    desc: "低空经济未来将成为万亿赛道...",
                    author: "中空领航官方",
                    likes: "5.8k",
                    comments: "512",
                    shares: "203",
                    tags: ["载人飞行", "新质生产力", "万亿赛道"]
                },
                {
                    url: "https://feiwow.com:62/?explorer/share/file&hash=23danud0SLz1DA8anWq5yVYAggyRpoKl3gX-IjCUuxM-7rm3XUbsDijVX-DWhOBAqEV3",
                    title: "15城联手共筑低空生态圈",
                    desc: "打造100个低空示范项目...",
                    author: "中空领航官方",
                    likes: "1.2k",
                    comments: "52",
                    shares: "210",
                    tags: ["载人飞行", "新质生产力", "低空研究院"]
                },
                {
                    url: "https://feiwow.com:62/?explorer/share/file&hash=d8ec0b_ZK259AKR2UhOVxMos-xK7ktED-fClKKy0Gr_TsEgDKvr9otL9I2PSjcyBdOV2",
                    title: "零重力助力合肥低空产业",
                    desc: "加快形成新质生产力...",
                    author: "中空领航官方",
                    likes: "2.2k",
                    comments: "123",
                    shares: "210",
                    tags: ["eVTOL", "新质生产力", "合肥智造"]
                },
                {
                    url: "https://feiwow.com:62/?explorer/share/file&hash=6357ppHKD6lcGJQ6pm77mnaBR8__uPeVopST8UJxLRkOZP5MeHLZGPFZmot_IVWlrFo4",
                    title: "合肥低空产业",
                    desc: "首批空中出租车将开展商业运营...",
                    author: "中空领航官方",
                    likes: "2.2k",
                    comments: "123",
                    shares: "210",
                    tags: ["空中出租车", "新质生产力", "合肥低空产业"]
                },
                {
                    url: "https://feiwow.com:62/?explorer/share/file&hash=2433Fi6wz6JCW3SO2T3vmvalVmqivXTsixLh6FsCa09HaFpRLFSwsqjieqcXb5Hwdua5",
                    title: "合肥骆岗中央公园",
                    desc: "全国首批载人类民用无人驾驶航空器运营合格证获颁...",
                    author: "中空领航官方",
                    likes: "3.2k",
                    comments: "1234",
                    shares: "200",
                    tags: ["骆岗公园", "新质生产力", "航空器运营合格证"]
                }
            ];
            
            // 短剧数据源
            const dramaVideoSources = [
                {
                    url: "https://pan.feiwow.com/raw/files/我在养老院里学诛仙 01-1749903349292.mp4",
                    title: "我在养老院里学诛仙",
                    desc: "第1集",
                    author: "短剧工作室",
                    likes: "10.3k",
                    comments: "1520",
                    shares: "832",
                    tags: ["修仙", "搞笑", "养老院"]
                },
                {
                    url: "https://pan.feiwow.com/raw/files/我在养老院里学诛仙 02-1749903474662.mp4",
                    title: "我在养老院里学诛仙",
                    desc: "第2集",
                    author: "短剧工作室",
                    likes: "12.5k",
                    comments: "2023",
                    shares: "916",
                    tags: ["修仙", "搞笑", "养老院"]
                },
                {
                    url: "https://pan.feiwow.com/raw/files/我在养老院里学诛仙 03-1749903795044.mp4",
                    title: "我在养老院里学诛仙",
                    desc: "第3集",
                    author: "短剧工作室",
                    likes: "12.5k",
                    comments: "2023",
                    shares: "916",
                    tags: ["修仙", "搞笑", "养老院"]
                },
                {
                    url: "https://pan.feiwow.com/raw/files/我在养老院里学诛仙 04-1749903818328.mp4",
                    title: "我在养老院里学诛仙",
                    desc: "第4集",
                    author: "短剧工作室",
                    likes: "12.5k",
                    comments: "2023",
                    shares: "916",
                    tags: ["修仙", "搞笑", "养老院"]
                },
                {
                    url: "https://pan.feiwow.com/raw/files/我在养老院里学诛仙 05-1749903856589.mp4",
                    title: "我在养老院里学诛仙",
                    desc: "第5集",
                    author: "短剧工作室",
                    likes: "12.5k",
                    comments: "2023",
                    shares: "916",
                    tags: ["修仙", "搞笑", "养老院"]
                }
            ];
            
            let currentVideoIndex = 0;
            let currentVideoType = 'recommend'; // 'recommend' 或 'drama'
            let currentVideoSources = videoSources; // 默认播放推荐视频
            
            const videoContainer = document.querySelector('.video-container');
            const videoItem = document.querySelector('.video-item');
            const videoElement = document.querySelector('.video-item video');
            const videoTitle = document.querySelector('.video-title');
            const videoDesc = document.querySelector('.video-desc');
            const creatorName = document.querySelector('.creator-name');
            const likeCount = document.querySelector('.interaction-btn:nth-child(2) .count');
            const commentCount = document.querySelector('.interaction-btn:nth-child(3) .count');
            const shareCount = document.querySelector('.interaction-btn:nth-child(4) .count');
            const progressBar = document.querySelector('.video-progress-bar');
            const categoryTabs = document.querySelectorAll('.category-tab');
            let isPlaying = true;
            
            // 隐藏视频控制条
            videoElement.controls = false;
            
            // 点击视频暂停/播放
            videoElement.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                if (videoElement.paused) {
                    videoElement.play();
                    isPlaying = true;
                } else {
                    videoElement.pause();
                    isPlaying = false;
                }
            });
            
            // 处理视频进度条
            videoElement.addEventListener('timeupdate', function() {
                const progress = (videoElement.currentTime / videoElement.duration) * 100;
                progressBar.style.width = progress + '%';
            });
            
            // 视频结束时自动播放下一个
            videoElement.addEventListener('ended', function() {
                nextVideo();
            });
            
            // 初始化第一个视频
            function loadVideo(index) {
                const videoData = currentVideoSources[index];
                videoElement.src = videoData.url;
                videoElement.load();
                progressBar.style.width = '0%';
                
                // 尝试播放视频，并处理可能的自动播放限制
                videoElement.play().then(() => {
                    isPlaying = true;
                }).catch(e => {
                    console.error("视频自动播放失败:", e);
                    isPlaying = false;
                    // 添加提示用户点击播放的信息
                    const playTip = document.createElement('div');
                    playTip.className = 'play-tip';
                    playTip.innerHTML = '<span class="material-icons">touch_app</span>点击播放视频和声音';
                    document.querySelector('.video-item').appendChild(playTip);
                    
                    // 点击视频区域时移除提示并播放
                    document.querySelector('.video-item').addEventListener('click', function() {
                        videoElement.play();
                        isPlaying = true;
                        if (document.querySelector('.play-tip')) {
                            document.querySelector('.play-tip').remove();
                        }
                    }, {once: true});
                });
                
                videoTitle.textContent = videoData.title;
                videoDesc.textContent = videoData.desc;
                creatorName.textContent = videoData.author;
                likeCount.textContent = videoData.likes;
                commentCount.textContent = videoData.comments;
                shareCount.textContent = videoData.shares;
                
                // 添加标签
                if(videoData.tags && videoData.tags.length > 0) {
                    let tagsHtml = '';
                    videoData.tags.forEach(tag => {
                        tagsHtml += `<span class="video-tag">#${tag} </span>`;
                    });
                    // 在描述后添加标签
                    videoDesc.innerHTML = videoData.desc + '<br>' + tagsHtml;
                }
            }
            
            // 页面加载时初始化第一个视频
            loadVideo(0);
            
            // 滑动切换视频
            let startY = 0;
            let endY = 0;
            let startX = 0;
            let endX = 0;
            
            videoContainer.addEventListener('touchstart', function(e) {
                startY = e.touches[0].clientY;
                startX = e.touches[0].clientX;
            });
            
            videoContainer.addEventListener('touchend', function(e) {
                endY = e.changedTouches[0].clientY;
                endX = e.changedTouches[0].clientX;
                
                // 水平距离变化不大时才判断为垂直滑动
                const xDiff = Math.abs(startX - endX);
                if (xDiff < 50) {
                    if (startY - endY > 70) { // 向上滑动
                        nextVideo();
                    } else if (endY - startY > 70) { // 向下滑动
                        prevVideo();
                    }
                }
            });
            
            function nextVideo() {
                currentVideoIndex = (currentVideoIndex + 1) % currentVideoSources.length;
                loadVideo(currentVideoIndex);
            }
            
            function prevVideo() {
                currentVideoIndex = (currentVideoIndex - 1 + currentVideoSources.length) % currentVideoSources.length;
                loadVideo(currentVideoIndex);
            }
            
            // 双击点赞效果
            const likeAnimation = document.querySelector('.like-animation');
            const likeBtn = document.querySelector('.interaction-btn:nth-child(2)');
            let lastTap = 0;
            
            videoContainer.addEventListener('click', function() {
                const currentTime = new Date().getTime();
                const tapLength = currentTime - lastTap;
                
                if (tapLength < 300 && tapLength > 0) {
                    // 双击触发点赞
                    likeAnimation.classList.add('show');
                    
                    // 更新点赞数
                    const likeCountElem = likeBtn.querySelector('.count');
                    let countText = likeCountElem.textContent;
                    let count;
                    
                    if (countText.includes('k')) {
                        count = parseFloat(countText.replace('k', '')) * 1000;
                    } else {
                        count = parseInt(countText);
                    }
                    
                    count += 1;
                    
                    if (count >= 1000) {
                        likeCountElem.textContent = (count / 1000).toFixed(1) + 'k';
                    } else {
                        likeCountElem.textContent = count.toString();
                    }
                    
                    // 动画结束后移除类
                    setTimeout(() => {
                        likeAnimation.classList.remove('show');
                    }, 1000);
                }
                lastTap = currentTime;
            });
            
            // 分类标签点击
            categoryTabs.forEach((tab, index) => {
                tab.addEventListener('click', function() {
                    categoryTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 获取标签文本
                    const tabText = this.textContent;
                    
                    // 根据点击的标签切换视频源
                    if (tabText === '短剧') {
                        // 切换到短剧
                        currentVideoSources = dramaVideoSources;
                        currentVideoType = 'drama';
                        currentVideoIndex = 0; // 重置为第一个视频
                        loadVideo(currentVideoIndex);
                    } else if (tabText === '推荐' && currentVideoType !== 'recommend') {
                        // 切换回推荐
                        currentVideoSources = videoSources;
                        currentVideoType = 'recommend';
                        currentVideoIndex = 0; // 重置为第一个视频
                        loadVideo(currentVideoIndex);
                    } else if (currentVideoType === 'recommend') {
                        // 在推荐类别内切换标签时，随机选择一个推荐视频
                        loadVideo(Math.floor(Math.random() * videoSources.length));
                    }
                });
            });
            
            // 评论按钮点击事件
            const commentBtn = document.querySelector('.interaction-btn:nth-child(3)');
            const commentsContainer = document.querySelector('.comments-container');
            const closeCommentBtn = document.querySelector('.close-btn');
            
            commentBtn.addEventListener('click', function() {
                commentsContainer.classList.add('show');
            });
            
            closeCommentBtn.addEventListener('click', function() {
                commentsContainer.classList.remove('show');
            });
            
            // 商家推荐卡片显示（模拟视频结束时显示）
            const merchantCard = document.querySelector('.merchant-card');
            
            // 模拟5秒后显示商家卡片
            setTimeout(() => {
                merchantCard.classList.add('show');
                
                // 3秒后自动隐藏
                setTimeout(() => {
                    merchantCard.classList.remove('show');
                }, 3000);
            }, 5000);
            
            // 底部导航切换
            const navItems = document.querySelectorAll('.nav-item');
            
            navItems.forEach((item) => {
                item.addEventListener('click', function() {
                    navItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 获取当前点击的导航项的标签文本
                    const label = this.querySelector('.label').textContent.trim();
                    
                    // 根据标签文本确定要跳转的页面
                    let targetPage;
                    switch(label) {
                        case '首页':
                            targetPage = 'index.html';
                            break;
                        case '当股东':
                            targetPage = 'airplane.html';
                            break;
                        case '建营地':
                            targetPage = 'camp.html';
                            break;
                        case '领红包':
                            targetPage = 'video.html';
                            break;
                        case '我的':
                            targetPage = 'my.html';
                            break;
                        default:
                            return; // 如果没有匹配的标签，不执行任何操作
                    }
                    
                    // 获取当前页面的文件名
                    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
                    
                    // 如果点击的是当前页面对应的导航项，不执行任何操作
                    if (targetPage === currentPage) {
                        return;
                    }
                    
                    // 否则跳转到对应页面
                    window.location.href = targetPage;
                });
            });
            
            // 搜索功能
            const searchToggle = document.getElementById('search-toggle');
            const searchContainer = document.getElementById('search-container');
            const parseBtn = document.getElementById('parse-btn');
            const douyinUrlInput = document.getElementById('douyin-url');
            
            // 搜索按钮点击事件
            searchToggle.addEventListener('click', function() {
                searchContainer.style.display = searchContainer.style.display === 'none' || searchContainer.style.display === '' ? 'block' : 'none';
            });
            
            // 点击解析按钮
            parseBtn.addEventListener('click', function() {
                const input = douyinUrlInput.value.trim();
                if (!input) {
                    alert('请输入视频链接或关键词');
                    return;
                }
                
                // 显示加载状态
                parseBtn.textContent = '搜索中...';
                parseBtn.disabled = true;
                
                // 模拟视频搜索/解析
                setTimeout(() => {
                    // 随机选择一个视频
                    const randomIndex = Math.floor(Math.random() * videoSources.length);
                    loadVideo(randomIndex);
                    
                    // 恢复按钮状态
                    parseBtn.textContent = '搜索';
                    parseBtn.disabled = false;
                    
                    // 隐藏搜索区域
                    searchContainer.style.display = 'none';
                    
                    // 清空输入框
                    douyinUrlInput.value = '';
                }, 1000);
            });
            
            // 初始化引导系统
            setTimeout(() => {
                // 视频页面引导步骤配置
                const videoGuideSteps = [
                    {
                        target: '.category-tabs',
                        title: '视频分类',
                        content: '这里可以选择不同类型的视频内容，点击切换分类。',
                        position: 'bottom'
                    },
                    {
                        target: '.video-container',
                        title: '视频播放',
                        content: '上下滑动可以切换视频，双击屏幕可以点赞。',
                        position: 'bottom'
                    },
                    {
                        target: '.video-progress',
                        title: '播放进度',
                        content: '这里显示视频的播放进度，您可以看到观看时长。',
                        position: 'bottom'
                    },
                    {
                        target: '.interaction-bar',
                        title: '互动功能',
                        content: '这里提供点赞、评论、分享等互动功能。',
                        position: 'left'
                    },
                    {
                        target: '#search-toggle',
                        title: '搜索功能',
                        content: '点击这里可以搜索视频或解析外部视频链接。',
                        position: 'bottom'
                    },
                    {
                        target: '.nav-item.active',
                        title: '当前页面',
                        content: '这里是视频页面，您可以观看和互动各类视频内容。',
                        position: 'top'
                    }
                ];
                
                // 如果引导系统已加载，则初始化
                if (typeof guideSystem !== 'undefined') {
                    guideSystem.init('video', videoGuideSteps);
                }
            }, 1500);
        });
    </script>
    
    <!-- 引入引导系统脚本 -->
    <script src="guide.js"></script>
</body>
</html>